// 主题色
$primary-color: #409eff;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;

// 文字颜色
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;

// 边框颜色
$border-base: #dcdfe6;
$border-light: #e4e7ed;
$border-lighter: #ebeef5;
$border-extra-light: #f2f6fc;

// 背景颜色
$bg-base: #f5f7fa;
$bg-light: #fafafa;
$bg-lighter: #fcfcfc;
$bg-extra-light: #ffffff;

// 断点
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-xxl: 1600px;

// 间距
$spacing-base: 16px;
$spacing-xs: $spacing-base * 0.25;  // 4px
$spacing-sm: $spacing-base * 0.5;   // 8px
$spacing-md: $spacing-base;         // 16px
$spacing-lg: $spacing-base * 1.5;   // 24px
$spacing-xl: $spacing-base * 2;     // 32px
$spacing-xxl: $spacing-base * 3;    // 48px

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 13px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;

// 圆角
$border-radius-base: 4px;
$border-radius-sm: 2px;
$border-radius-lg: 8px;
$border-radius-round: 20px;
$border-radius-circle: 50%;

// 阴影
$box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
$box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$box-shadow-lighter: 0 2px 8px rgba(0, 0, 0, 0.06);
$box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);

// 过渡
$transition-base: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-fast: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
$transition-slow: all 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);

// z-index
$z-index-normal: 1;
$z-index-dropdown: 1000;
$z-index-sticky: 1020;
$z-index-fixed: 1030;
$z-index-modal-backdrop: 1040;
$z-index-modal: 1050;
$z-index-popover: 1060;
$z-index-tooltip: 1070;

// 容器宽度
$container-width-sm: 540px;
$container-width-md: 720px;
$container-width-lg: 960px;
$container-width-xl: 1140px;
$container-width-xxl: 1320px; 